// 门禁管理
<template>
  <div class="entrance labBox">
    <laboratoryRightHeader
      :tabList="tabList"
      :commonIndex="commonIndex"
      @setTab="(event) => (commonIndex = event)"
    ></laboratoryRightHeader>
    <div class="table">
      <laboratoryRightTableHeader
        :uploadTrue="commonIndex === 0 ? true : false"
        :tableTimeValue="tableTimeValue"
        :type="'datetimerange'"
        @outValue="(event) => (tableTimeValue = event)"
        :exportInterfaceName="
          commonIndex === 0 ? 'accessManageexport' : 'baseEquipmentExport'
        "
        :formData="'formData'"
      ></laboratoryRightTableHeader>
      <template v-if="commonIndex === 0">
        <mergeTable :tableData="tableList" :tableConfig="config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
        </mergeTable>
      </template>
      <template v-if="commonIndex === 1">
        <mergeTable :tableData="device.table" :tableConfig="device.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column align="center" label="维护记录" slot="maintain">
            <template slot-scope="{ row }">
              <div
                class="fs-12 cr-main cursor flex-column"
                @click="maintainDialog(row)"
              >
                查看
                <div class="lookline"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="处理状态"
            slot="equipmentStatus"
          >
            <template slot-scope="{ row }">
              <span
                class="fs-12"
                :style="{
                  color: tableCommonMethod.getOnlineColor(row.equipmentStatus),
                }"
                >{{
                  tableCommonMethod.getOnlineStatus(row.equipmentStatus)
                }}</span
              >
            </template>
          </el-table-column>
        </mergeTable>
      </template>
      <paging @onPage="onPage" @onNum="onNum" :total="total" />
      <!-- 维护记录弹窗 -->
      <tableDialog
        :dialogTableVisible="maintain.maintainTableDialog"
        :title="'维护记录'"
        :text="`累计维修次数：${formData.findCount}次`"
        :total="maintain.total"
        :type="'datetimerange'"
        :uploadTrue="false"
        :diaPageNum="formData.diaPageNum"
        :diaPageSize="formData.diaPageSize"
        :formData="'formData'"
        :eventName="'getdeviceInfo'"
        :tableTimeValue="diatableTimeValue"
        @outValue="(event) => (diatableTimeValue = event)"
        @outOptionValue="(event) => (formData.eventType = event)"
        @close="
          (event) => {
            maintain.maintainTableDialog = event;
          }
        "
      >
        <template #table>
          <mergeTable
            :tableData="maintain.table"
            :tableConfig="maintain.config"
          >
            <el-table-column
              slot="index"
              align="center"
              type="index"
              label="编号"
            ></el-table-column>
          </mergeTable>
        </template>
      </tableDialog>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
import laboratoryRightTableHeader from "../laboratoryRightTableHeader.vue";
import {
  accessManage,
  devicefindPage,
  equipmentMaintainfindCount,
  deviceInfo,
} from "@/http/api";
import {
  laboratoryEntranceConfig,
  laboratoryEntranceDeviceConfig,
  laboratoryEntranceMaintainConfig,
} from "@/jsonData/table";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
export default {
  name: "entrance",
  components: {
    laboratoryRightTableHeader,
  },

  data() {
    return {
      commonIndex: 0,
      tableCommonMethod: tableCommonMethod,
      tabList: [
        {
          id: 0,
          name: "门禁列表",
        },
        {
          id: 1,
          name: "设备状态",
        },
      ],
      device: {
        table: [],
        config: laboratoryEntranceDeviceConfig,
        total: 0,
      },
      maintain: {
        maintainTableDialog: false,
        table: [],
        config: laboratoryEntranceMaintainConfig,
        total: 0,
      },
      tableList: [],
      config: laboratoryEntranceConfig,
      total: 0,
      lineOptions: {
        outlet1: {},
        outlet2: {},
        outlet3: {},
        outlet4: {},
      },
      formData: {
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
        diaPageNum: 1,
        diaPageSize: 10,
        diapageSize: 10,
        diapageNum: 1,
        equipmentNo: "",
        laboratoryNo: "",
        equipmentType: 4,
        equipmentName: "",
        findCount: 0,
      },
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      diatableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
    };
  },
  mounted() {
    this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.initaccessManagee();
  },
  computed: {
    ...mapState({
      changeWidth: (state) => state.laboratory.changeWidth,
      facultyNo: (state) => state.laboratory.facultyNo,
      laboratoryNo: (state) => state.laboratory.laboratoryNo,
      collegeNo: (state) => state.laboratory.collegeNo,
    }),
  },
  methods: {
    // 门禁列表
    async initaccessManagee() {
      let params = {
        laboratoryNo: this.laboratoryNo,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      let res = await accessManage(params);
      if (res.code === 20000) {
        this.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },
    // 设备信息
    async initdevicefindPage() {
      let params = {
        laboratoryNo: this.laboratoryNo,
        equipmentNo: this.formData.equipmentNo,
        equipmentType: this.formData.equipmentType,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      let res = await devicefindPage(params);
      if (res.code === 20000) {
        this.device.table = res.data.rows;
        this.device.total = res.data.total;
      }
    },
    onPage(val) {
      this.formData.pageSize = val;
      this.getcommonIndexData(this.commonIndex);
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.getcommonIndexData(this.commonIndex);
    },
    // 维护记录
    maintainDialog(row) {
      this.resetdia();
      this.formData.type = "maintain";
      this.maintain.maintainTableDialog = true;
      this.formData.equipmentNo = row.equipmentNo;
      this.initfindCount();
      this.getdeviceInfo();
    },
    /* 设备不同状态对应的数量 */
    async initfindCount() {
      let params = {
        user: this.formData.user,
        equipmentNo: this.formData.equipmentNo,
      };
      let res = await equipmentMaintainfindCount(params);
      if (res.code === 20000) {
        this.formData.findCount = res.data;
      }
    },
    // 维护记录弹窗列表
    async getdeviceInfo() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        startTime: this.formData.diastartTime,
        endTime: this.formData.diaendTime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        user: this.formData.user,
      };
      let res = await deviceInfo(params);
      if (res.code === 20000) {
        this.maintain.table = res.data.rows;
        this.maintain.total = res.data.total;
      }
    },

    // 初始化时间和页码
    reset() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.pageNum = 1;
      this.formData.pageSize = 10;
      this.formData.startTime = this.$getTime(originTimeValue[0], true);
      this.formData.endTime = this.$getTime(originTimeValue[1], true);
      this.tableTimeValue = [this.formData.startTime, this.formData.endTime];
    },
    resetdia() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.diaPageNum = 1;
      this.formData.diaPageSize = 10;
      this.formData.diastartTime = this.$getTime(originTimeValue[0], true);
      this.formData.diaendTime = this.$getTime(originTimeValue[1], true);
      this.diatableTimeValue = [
        this.formData.diastartTime,
        this.formData.diaendTime,
      ];
    },
    getcommonIndexData(commonIndex) {
      switch (commonIndex) {
        case 0:
          this.initaccessManagee();
          break;
        case 1:
          this.initdevicefindPage();
          break;
      }
    },
  },
  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.getcommonIndexData(this.commonIndex);
      },
      deep: true,
    },
    diatableTimeValue: {
      handler(val) {
        this.formData.diastartTime = val[0];
        this.formData.diaendTime = val[1];
        this.getdeviceInfo();
      },
      deep: true,
    },
    "formData.equipmentNo": {
      handler(val) {
        this.getcommonIndexData(this.commonIndex);
      },
      deep: true,
    },
    laboratoryNo(val) {
      this.getcommonIndexData(this.commonIndex);
    },
    commonIndex(index) {
      this.reset();
      this.getcommonIndexData(this.commonIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
.entrance {
  .table {
    padding: 0px 24px;
    .tableDetail {
      height: 64px;
    }
    .bottom-wrap {
      left: 48px !important;
      right: 48px !important;
      position: absolute;
      bottom: 20px;
    }
    .dataChartBox {
      display: flex;
      flex-flow: row wrap;
      /* justify-content: space-between; */
      justify-content: flex-start;
      width: 100%;
    }

    .dataChartBox .chart {
      position: relative;
      width: 48%;
      margin: 0 1%;
      height: 320px;
      min-height: 272px;
      background: #fff;
    }

    .dataChartBox .chart .openchart {
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 1;
    }

    .dataChartBox .chart .openchart i {
      font-size: 12px;
    }
  }
}
</style>
<style lang="scss">
.el-dialog.deviceDialog {
  height: 260px !important;
  .el-dialog__close {
    top: auto !important;
  }
  .el-date-editor .el-range__icon {
    line-height: 34px !important;
  }
  .el-dialog__body {
    background: none !important;
  }
  .el-range-separator {
    line-height: 30px !important;
  }
  .exportExcelButton {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      color: #00bfb1;
      line-height: 28px;
      cursor: pointer;
      width: 90px;
      height: 28px;
      border: 1px solid #00bfb1;
      border-radius: 2px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>